<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
  <head>
    <meta charset="UTF-8">
    <title>借公共区域</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
    <link rel="shortcut icon" th:href="@{~/UI/favicon.ico}" type="image/x-icon" />
    <link rel="stylesheet" th:href="@{~/UI/css/font.css}">
    <link rel="stylesheet" th:href="@{~/UI/css/xadmin.css}">
    <script th:src="@{~/UI/js/jquery.min.js}"></script>
    <script th:src="@{~/UI/lib/layui/layui.js}"></script>
    <script type="text/javascript" th:src="@{~/UI/js/xadmin.js}"></script>
    <!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
    <!--[if lt IE 9]>
      <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
      <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  
  <body>
  <div class="x-nav">
      <span class="layui-breadcrumb">

      </span>
      <a class="layui-btn layui-btn-primary layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right" href="javascript:location.replace(location.href);" title="刷新">
          <i class="layui-icon" style="line-height:38px">ဂ</i></a>
  </div>
  <div class="x-body">

      <input id="pid" hidden="">

      <div class="layui-row">
          <form class="layui-form layui-col-md12  layui-form-pane">
              <div class="layui-form-item" id="x-city">
                  <label class="layui-form-label">选择楼栋</label>
                  <div class="layui-input-inline">
                      <select name="building" id="building" lay-filter="building">
                          <option value="">请选楼栋</option>
                          <option th:each="bu:${buildingEntities}" th:value="${bu.bid}" th:text="${bu.bname}"></option>
                      </select>
                  </div>
                  <!--<label class="layui-form-label">选择楼层</label>-->
                  <!--<div class="layui-input-inline">-->
                      <!--<select name="floor" id="floor" lay-filter="floor">-->
                          <!--<option value="">请选楼层</option>-->
                      <!--</select>-->
                  <!--</div>-->
              </div>
          </form>
      </div>

      <table class="layui-table">

        <thead>
          <tr>
           <!-- <th>
              <div class="layui-unselect header layui-form-checkbox" lay-skin="primary"><i class="layui-icon">&#xe605;</i></div>
            </th>-->
            <th>公共区域ID</th>
            <th>公共区域名</th>
            <th>状态</th>
            <th>操作</th>
          </tr>
        </thead>

        <tbody id="tbod"></tbody>

      </table>

      <!--分页-->
      <!--<div class="page">-->
        <!--<div>-->
          <!--<a class="prev" href="">&lt;&lt;</a>-->
          <!--<a class="num" href="">1</a>-->
          <!--<span class="current">2</span>-->
          <!--<a class="num" href="">3</a>-->
          <!--<a class="num" href="">489</a>-->
          <!--<a class="next" href="">&gt;&gt;</a>-->
        <!--</div>-->
      <!--</div>-->

    </div>

  <script>
      layui.use('form', function(){
          var form = layui.form;
          //各种基于事件的操作，下面会有进一步介绍
      });
  </script>

  <script>

      layui.use(['form'], function () {
          //必须要初始化 form
          var form = layui.form;
          /**
           * toSelGoodsID 下拉列表触发事件
           */
          form.on('select(building)', function (data) {
              //获取当前选中下拉项的索引
              var indexGID = data.elem.selectedIndex;
              //获取当前选中下拉项的自定义属性值 title
              var goodsName = data.elem[indexGID].title;
              //获取当前选中下拉项的 value值
              var bid = data.value;
              showPublicareaByBid(bid);
          });
      });

      //查公共区域
      function showPublicareaByBid(bid){
          $.ajax({
              type: "post",
              url: "showPublicareaByBid",
              dataType: "json",
              data: {bid:bid},
              success: function (data) {
                  $("#tbod").empty();
                  for(var i = 0; i < data.length; i++){
                      var type;
                      if (data[i].paflag == 0) {
                          type = "空闲中";
                      }else {
                          type = "已占用";
                      }
                      $("#tbod").append(
                          "<tr>" +
                              "<td>" + data[i].paid + "</td>" +
                              "<td>" + data[i].paname + "</td>" +
                              "<td>" + type + "</td>" +
                              "<td>" +
                                  "<a title='输入时间' onclick='publicareaBorrow(" + data[i].paid + ")' href='javascript:;'>" +
                                  "<i class='icon iconfont'></i>" +
                                  "</a>" +
                              "</td>" +
                          "</tr>"
                      );
                  }
                  renderForm();//表单重新渲染，要不然添加完显示不出来新的option
              }
          });
      }

      function publicareaBorrow(paid) {
          var bid = $("#building").val();
          parent.layer.open({
              type: 1,
              title: '借用时间/小时',
              skin: 'layui-layer-molv',
              closeBtn: 0,
              shadeClose: true,
              shade: false,
              area: ['300px', '140px'],
              content:'<input class="layui-input" data-th-value="${user?.userName}" id="txtReason" name="txtReason" type="text" lay-verType="tips" lay-verify="required" autocomplete="off" placeholder="请输入借用时间"/>',
              btn: ['确定', '取消']
              , yes: function (index,layero) {
                  var txtReason = top.$('#txtReason').val();
                  if (txtReason > 24) {
                      parent.layer.close(index);
                      layer.alert("最多借用24小时");
                  }else {
                      $.ajax({
                          type: "post",
                          url: "/publicareaBorrow",
                          dataType: "json",
                          data: {paid:paid,bid:bid,bortime:txtReason},
                          success: function (data) {
                              if (data == 1) {
                                  layer.alert("提交成功");
                                  parent.layer.close(index);
                                  $("#tbod").empty();
                                  $("#floor").empty();
                                  var win = window.open("","_self");
                                  win.close();
                                  window.open("checkTimeBorrow","_self");
                              }else if (data == 0) {
                                  parent.layer.close(index);
                                  layer.alert("提交失败，您还有一个已借教室未归还");
                              }
                          }
                      });
                  }
              }
          });
      }

      //重新渲染表单
      function renderForm(){
          layui.use('form', function(){
              var form = layui.form;
              form.render();
          });
      }
  </script>

  </body>

</html>